---
import { SEO } from 'astro-seo'

type Props = {
    seo: {
        title: string,
        description?: string,
        image?: {
            src: string,
            mimeType: string,
            alt: string
        }
    }
}

const { seo: { title, description, image } } = Astro.props as Props
const DEFAULT_TITLE_PAGE = 'Unistyles 2.0'
const DEFAULT_DESCRIPTION_PAGE = 'Level up your React Native StyleSheet!'
const DEFAULT_URL_SITE = 'https://reactnativeunistyles.vercel.app'
const openGraph = {
    title: title ||DEFAULT_TITLE_PAGE,
    type: image?.mimeType || 'image/jpg',
    image: image?.src || `${DEFAULT_URL_SITE}/opengraph-image2.jpg`,
    alt: image?.alt || 'Unistyles',
    url: DEFAULT_URL_SITE,
    description: description || DEFAULT_DESCRIPTION_PAGE
}
---

<head>
    <SEO
        charset="UTF-8"
        title={title || DEFAULT_TITLE_PAGE}
        description={description || DEFAULT_DESCRIPTION_PAGE}
        openGraph={{
            basic: {
                title: openGraph.title,
                type: openGraph.type,
                image: openGraph.image
            },
            image: {
                alt: openGraph.alt
            },
            optional: {
                description: openGraph.description
            }
        }}
        twitter={{
            creator: '@jpudysz'
        }}
        extend={{
            link: [
                { rel: 'icon', href: '/favicon.png' },
                { rel: 'sitemap', href: '/sitemap-index.xml' }
            ],
            meta: [
                { name: 'viewport', content: 'width=device-width, initial-scale=1' },
                { name: 'generator', content: Astro.generator },
                { name: 'twitter:image', content: openGraph.image },
                { name: 'twitter:card', content: 'summary_large_image' },
                { name: 'twitter:title', content: openGraph.title },
                { name: 'twitter:description', content: openGraph.description },
                { name: 'twitter:site', content: '@jpudysz' }
            ]
        }}
    />
    <script>
        window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
    </script>
    <script defer src="/_vercel/insights/script.js"></script>
</head>
<slot/>
